<template>
    <div class="box">
        <div class="top">
            <el-switch v-model="value" size="large" />
        </div>
        <div class="cen">
            <h3>我的后台管理系统</h3>
            <el-form ref="loginFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="loginRules"
                label-width="auto" class="demo-ruleForm">
                <!-- 用户名 -->
                <el-form-item class="items" prop="username">
                    <div class="p-2">
                        <svg-icon icon-class="user" />
                    </div>
                    <el-input v-model="ruleForm.username" type="input" autocomplete="off" :placeholder="'用户名'" />
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <span class="p-2">
                        <svg-icon icon-class="password" />
                    </span>
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" :placeholder="'密码'" />
                </el-form-item>
                <!-- 验证码 -->
                <el-form-item class="yzm" prop="captchaCode">
                    <span class="p-2">
                        <svg-icon icon-class="verify-code" />
                    </span>
                    <el-input v-model="ruleForm.captchaCode" :placeholder="'验证码'" />
                    <div class="captcha">
                        <el-image :src="captchas64" class="w-[120px] h-[48px] cursor-pointer" @click="captchaFen">
                            <template #error>
                                <div class="image-slot">
                                    <i-ep-picture />
                                </div>
                            </template>
                        </el-image>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" type="primary" @click="submitForm">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="xx">
                <p>用户名:admin</p>
                <p>密码:123456</p>
            </div>
        </div>
        <!-- ICP备案 -->
        <div class="tcp">
            <p>
                Copyright © 2021 - 2023 youlai.tech All Rights Reserved. 有来技术
                版权所有
            </p>
            <p>皖ICP备20006496号-3</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute, useRouter, type LocationQuery, type LocationQueryValue } from 'vue-router';
import SvgIcon from '@/components/SvgIcon/index.vue'
import { captcha } from '@/api/auth/index'
import { LoginData } from '@/api/auth/types'
import { useUserStore } from "@/stores";
import router from '@/router';
const value = ref(true)
const routers = useRouter()
const loginFormRef = ref<FormInstance>(); // 登录表单ref
const loading = ref(false); // 按钮loading
// 登录数据
const ruleForm = reactive({
    password: '123456',
    username: 'admin',
})
const userStore = useUserStore();
// 获取接口数据
/* 验证码数据 */
const captchas64 = ref(); // 验证码图片Base64字符串
const captchaFen = async () => {
    await captcha().then((res) => {
        const { captchaKey, captchaBase64 } = res
        ruleForm.captchaKey = captchaKey;
        captchas64.value = captchaBase64;
    });
}
//----------//

/* const checkAge = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入验证码'))
    }
    // setTimeout(() => {
    //     if (!Number.isInteger(value)) {
    //         callback(new Error('Please input digits'))
    //     } else {
    //         if (value < 18) {
    //             callback(new Error('Age must be greater than 18'))
    //         } else {
    //             callback()
    //         }
    //     }
    // }, 1000)
}

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (ruleForm.password !== '') {
            if (!loginFormRef.value) return
            loginFormRef.value.validateField('checkPass')
        }
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    } else if (value !== ruleForm.username) {
        callback(new Error("用户名或密码错误"))
    } else {
        callback()
    }
} */

// 表单的验证规则
const loginRules = computed(() => {
    return {
        username: [
            {
                required: true,
                trigger: "blur",
                message: ("请输入用户名"),
            },
        ],
        password: [
            {
                required: true,
                trigger: "blur",
                message: ("请输入密码"),
            },
            {
                min: 6,
                message: ("密码不能少于6位"),
                trigger: "blur",
            },
        ],
        captchaCode: [
            {
                required: true,
                trigger: "blur",
                message: ("请输入验证码"),
            },
        ],
    };
});

// 登录
const route = useRoute();
const submitForm = () => {
    loginFormRef.value?.validate((valid: boolean) => {
        if (valid) {
            loading.value = true;
            userStore
                .login(ruleForm)
                .then(() => {
                    /* const query: LocationQuery = route.query;
                    const redirect = (query.redirect as LocationQueryValue) ?? "/";
                    const otherQueryParams = Object.keys(query).reduce(
                        (acc: any, cur: string) => {
                            if (cur !== "redirect") {
                                acc[cur] = query[cur];
                            }
                            return acc;
                        },
                        {}
                    ); */

                    router.push({
                        path:'/sy'
                    });
                })
                .catch(() => {
                    captchaFen();
                })
                .finally(() => {
                    loading.value = false;
                });
        }
    });
}

// 生命周期函数
onMounted(() => {
    captchaFen()
})


</script>

<style lang="scss" scoped>
.box {
    width: 100vw;
    background: linear-gradient(45deg, white, #d2f0fc, white, #fadaf7, white);
    padding-bottom: 100px;
}

.cen {
    width: 400px;
    margin: 50px auto;
    background-color: white;
    text-align: center;
    padding: 30px 20px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 2px #dedddd;
}

.cen h3 {
    margin-bottom: 30px;
    font-size: 25px;
    font-weight: 600;
}

.el-button {
    width: 100%;
    height: 40px;
}

.el-input {
    height: 50px;
}

::v-deep.el-input input {
    padding-left: 20px;
    box-sizing: border-box;
}

.el-form-item {
    position: relative;
}

.p-2 {
    position: absolute;
    z-index: 1;
}

.xx {
    display: flex;
    justify-content: space-around;
}

.tcp {
    text-align: center;
}

.captcha {
    position: absolute;
    top: 1px;
    right: 2px;

    .image-slot {
        display: flex;
        align-items: center;
        justify-content: right;
        width: 100%;
        height: 100%;
        font-size: 18px;
        color: var(--el-text-color-secondary);
        background: var(--el-fill-color-light);

        svg {
            margin-right: 10px;
        }
    }
}

.yzm {
    height: 48px;
}
</style>